<template>
    <div :class="{ upLoadDom: true, flex_end: right }">
        <draggable class='dragge_box' :list="arr" ghost-class="ghost" :delay="300" chosen-class="chosenClass"
            animation="300" @start="onStart" @end="onEnd">
            <template #item="{ element, index }">
                <div class="upLoadDomitem" :style="{ width: `${width}px`, height: `${height}px` }">
                    <div v-if="isPdf(element.url)" class="product_image_div_pdf">
                        <img src="@/assets/home/pdf.png"
                            :style="{ width: `${+width - 33}px`, height: `${+height - 33}px` }" alt="">
                        <div class="product_image_div_pdf_buttton" @click="downloadPdf(element.url)">下载</div>
                        <van-icon v-if="isPdfLook" name="cross" color="#fff" @click.prevent="deleteImg(arr, index)" />
                    </div>
                    <!-- 不是pdf文件 -->
                    <div v-if="!isPdf(element.url)" class="nopdf_div">
                        <div class="loading_pic" v-if="!element.url">
                            <van-loading type="spinner" size="20" />
                        </div>
                        <van-image v-if="element.url" fit="cover"
                            :src="element.url + '?x-oss-process=image/resize,w_300'"
                            @click="enlargeImage(element.url)"></van-image>
                        <van-icon v-if="element.url && !look" name="cross" color="#fff"
                            @click.prevent="deleteImg(arr, index)" />
                    </div>
                </div>
            </template>
        </draggable>
        <!-- <div v-for="(item, index) in arr" :key="index" class="upLoadDomitem"
            >
        </div> -->
        <van-image :style="{ width: `${width}px`, height: `${height}px`, margin: '0 5px 5px 0' }" :src="upload"
            v-if="arr.length < maxCount" @click="postImage" v-throttle:click></van-image>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { storeToRefs } from "pinia";
import { loginStore } from "@/store/login";
import { showImagePreview } from 'vant';
import upload from '@/assets/home/upload.png'
import draggable from 'vuedraggable';
//拖拽开始的事件
const onStart = () => {
}
//拖拽结束的事件
const onEnd = () => {
}
defineProps({
    arr: { type: Array<any>, default: [] },
    width: { default: '90' },
    height: { default: '90' },
    right: { default: false },
    maxCount: { default: 1 },
    look: { default: false },
    isPdfLook: { default: false },
})
const emit = defineEmits(['deleteClick', 'postImageClick'])
const store = loginStore();
const { token } = storeToRefs(store);

const deleteImg = (arr: Array<any>, index: number) => {
    emit('deleteClick', arr, index)
}

const postImage = () => {
    emit('postImageClick')
}

// 下载预览
const downloadPdf = (item: string) => {
    (window as any).uni.webView.postMessage({
        data: {
            type: 'download',
            url: item,
            header: {
                Authorization: `Bearer ${token.value}`,
                clientid: 'e5cd7e4891bf95d1d19206ce24a7b32e'
            }
        }
    })
}
/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img]
        })
    }
}
// pdf显隐
const isPdf = (url: string) => {
    return url.includes(".pdf")
}
</script>

<style lang="less" scoped>
.dragge_box {
    display: contents;
    // align-items: center;
    // flex-wrap: wrap;
}

.flex_end {
    justify-content: flex-end;
}

.upLoadDom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .upLoadDomitem {
        margin: 0 5px 5px 0;
        box-sizing: border-box;
        position: relative;

        :deep(.van-image) {
            width: 100%;
            height: 100%;
        }

        .nopdf_div {
            width: 100%;
            height: 100%;
        }

        .loading_pic {
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product_image_div_pdf {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 1px dashed #AFB6C3;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;

            .product_image_div_pdf_buttton {
                color: #0094FF;
            }
        }


        :deep(.van-icon) {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 8px;
            height: 15px;
            width: 15px;
            background-color: #000;
            border-bottom-left-radius: 16px;
            text-align: right;
            padding: 3px 2px 0 0;
            box-sizing: border-box;
        }
    }
}
</style>